<!--
 * @Author: Mr.Sen
 * @LastEditTime: 2021-02-09 11:25:04
 * @Description: 
 * @Website: https://grimoire.cn
 * @Copyright (c) Mr.Sen All rights reserved.
-->
{%extends "root.html" %}
{% block mainbody %}

<style type="text/css">
	.subContent {
		display: grid;
		width: calc(45vw);
		margin: 0 auto;
		min-width: 750px;
		grid-template-columns: 1fr 1fr;
	}

	.paper {
		width: calc(32vw + 128px);
		margin: 3vh auto;
	}

	.body>main {
		width: 100vw;
		min-height: calc(75vh - 80px);
	}

	.authorInfo {
		display: flex;
		justify-content: center;
		flex-wrap: nowrap;
		color: #8c8889;
		margin-bottom: 4vh;
		margin: 0 auto;
	}

	.authorInfo>div {
		margin: 0 15px;
		font-size: 14px;
	}

	.body {
		min-height: calc(90vh - 80px);
	}

	@media only screen and (max-width:768px) {
		.subContent {
			display: grid;
			width: 90vw;
			margin: 0 auto;
			grid-template-columns: 1fr;
			min-width: 0px;
		}

		.paper {
			width: 90vw;
		}

		.body>main {
			width: 100vw;
			min-height: 75vh;
		}
	}
</style>
<link rel="stylesheet" href="/static/css/github.css">
<script src="/static/js/prism.js"></script>
<link rel="stylesheet" href="/static/css/prism.css">
<div class="paper">
	<h1 style="margin-top: 10vh; margin-bottom: 2vh; text-align: center;">{{title}}</h1>
	<div class="authorInfo">
		<div class="author iconfont icon-zuozhe"> {{author}}</div>
		<div class="date iconfont icon-time"> {{lastEdit}}</div>
		<div class="meta iconfont icon-wenjianjia"> {{metaName}}</div>
	</div>
	{{text|safe}}
</div>
<script>
	var pre = document.querySelectorAll("pre");
	pre.forEach((item) => {

		item.classList.add("line-numbers")
		item.style.whiteSpace = "pre-wrap";

	})
</script>
{% endblock %}